<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            position: absolute;
            width: 100px;
            height: 100px;
            text-align: center;
            left: 50%;
            top: 20%;
            cursor: pointer;
        }

        /* 首先，隐藏默认的Checkbox样式 */
        input[type="checkbox"] {
            display: none;
        }

        /* 添加未选中时的十字效果 */
        input[type="checkbox"]:not(:checked)+.checkmark::before,
        input[type="checkbox"]:not(:checked)+.checkmark::after {
            content: "";
            position: absolute;
            background-color: #67C08A;
            width: 15px;
            height: 2px;
            left: 45%;
            top: 45%;
            transform: translate(-50%, -50%);
        }

        input[type="checkbox"]:not(:checked)+.checkmark::after {
            transform: translate(-50%, -50%) rotate(90deg);
        }
    </style>
</head>

<body>
    <label class="container">
        <input type="checkbox">
        <div class="checkmark"></div>
    </label>
</body>
<!-- <script>
    document.addEventListener('DOMContentLoaded', function () {
        const checkboxes = document.querySelectorAll('.container input[type="checkbox"]');
        checkboxes.forEach(function (checkbox) {
            checkbox.addEventListener('change', function () {
                const checkmark = this.nextElementSibling;
                if (this.checked) {
                    checkmark.classList.remove('checkmark-unchecked');
                    checkmark.classList.add('checkmark-checked');
                } else {
                    checkmark.classList.remove('checkmark-checked');
                    checkmark.classList.add('checkmark-unchecked');
                }
            });
        });
    });
</script> -->

</html>